<template>
  <div class="index">
    <custom-select :options="years" v-model="year" />
    <custom-select :options="months" v-model="month" />
    <calendar ref="Calendar" />
  </div>
</template>

<script>
import Calendar from 'vue-calendar-component';
import CustomSelect from '../../components/custom-select';
import * as CST from './constants';
import * as util from './utils';
import moment from 'moment';

export default {
  components: {
    Calendar,
    CustomSelect,
  },
  watch: {
    year () {
      this.refresh();
    },
    month () {
      this.refresh();
    },
  },
  data () {
    return {
      year: Number(moment().format('YYYY')),
      month: Number(moment().format('MM')),
      years: util.optionsGen(CST.START_YEAR, CST.END_YEAR),
      months: util.optionsGen(CST.START_MONTH, CST.END_MONTH),
    };
  },
  methods: {
    refresh () {
      const date = `${ this.year }-${ this.month }-01`;
      this.$refs.Calendar.ChoseMonth(date, false);
    },
  },
}
</script>

<style>
@import url('./index.css');
</style>
